<template>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">剩余<strong>{{count}}</strong></span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters" @click="changeListShow">
        <li>
          <a :class="{selected : ListShowButton.all}" href="#/">全部任务</a>
        </li>
        <li>
          <a :class="{selected : ListShowButton.active}" href="#/active">进行中</a>
        </li>
        <li>
          <a :class="{selected : ListShowButton.completed}" href="#/completed">已完成</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('wholeDeleteList')">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props:['list'],
  data() {
    return {
      ListShowButton: {
        all: 1,
        active: 0,
        completed: 0,
      }
    }
  },
  computed:{
    count(){
      return this.list.filter(item => !item.isDone).length
    }
  },
  methods: {
    changeListShow(e) {
      if (e.target.tagName === 'A') {
        let flag
        if (e.target.href === 'http://localhost:8080/#/active') {
          this.ListShowButton = {
            all: 0,
            active: 1,
            completed: 0,
          }
          flag = 1
        }else if(e.target.href === 'http://localhost:8080/#/completed') {
          this.ListShowButton = {
            all: 0,
            active: 0,
            completed: 1,
          }
          flag = 0
        }else {
          this.ListShowButton = {
            all: 1,
            active: 0,
            completed: 0,
          }
          flag = 2
        }
        this.$emit('changeListShow' , flag)
      }
    }
  }
}
</script>

<style></style>
